<template>
	<view>
		<!-- 	<index @ShowNews="ShowNews" v-if="PageCur=='index'"></index>
		<search v-if="PageCur=='search'"></search>
		<cases v-if="PageCur=='cases'"></cases>
		
		<me v-if="PageCur=='me'"></me> -->

		<home ref="home" v-if="PageCur=='home'"></home>
		<square ref="square" v-if="PageCur=='square'"></square>
		<news v-if="PageCur=='news'"></news>
		<me v-if="PageCur=='me'"></me>

		<view class="box">
			<view class="cu-bar tabbar bg-white shadow foot">
				<view class="action" @click="NavChange" data-cur="home">
					<view class='cuIcon-cu-image'>
						<image v-if="PageCur=='home'" src="../../static/tabBar/index_cur.png"></image>
						<image v-if="PageCur != 'home'" src="../../static/tabBar/index.png"></image>
					</view>
					<view :class="PageCur=='home'?'color_main':'text-gray'">首页</view>
				</view>

				<view class="action" @click="NavChange" data-cur="square">
					<view class='cuIcon-cu-image'>
						<view class="cu-tag badge"><!-- 红点 --></view>
						<image v-if="PageCur=='square'" src="../../static/tabBar/shop_cur.png"></image>
						<image v-if="PageCur != 'square'" src="../../static/tabBar/shop.png"></image>
					</view>
					<view :class="PageCur=='square'?'color_main':'text-gray'">广场</view>
				</view>

				<view @click="gotoPublish" class="action text-gray add-action" data-cur="publish">
					<image class="logo_btn" mode="widthFix" src="../../static/tabBar/publish.png"></image>
					<view :class="PageCur=='publish'?'color_main':'text-gray'">卖闲置</view>

				</view>

				<view class="action" @click="NavChange" data-cur="news">
					<view class='cuIcon-cu-image'>
						<view class="cu-tag badge">{{message}}</view>
						<image v-if="PageCur=='news'" src="../../static/tabBar/order_cur.png"></image>
						<image v-if="PageCur != 'news'" src="../../static/tabBar/order.png"></image>
					</view>
					<view :class="PageCur=='news'?'color_main':'text-gray'">消息</view>
				</view>

				<view class="action" @click="NavChange" data-cur="me">
					<view class='cuIcon-cu-image'>
						<image v-if="PageCur=='me'" src="../../static/tabBar/me_cur.png"></image>
						<image v-if="PageCur != 'me'" src="../../static/tabBar/me.png"></image>
					</view>
					<view :class="PageCur=='me'?'color_main':'text-gray'">我的</view>
				</view>

			</view>
		</view>

		<!-- 		<u-mask :show="publishPopupShow" @click="publishPopupShow = false" :custom-style="{background: 'rgba(255, 255, 255, 0.5)'}">
			<view class="warp">
				<view class="rect" @tap.stop></view>
			</view>
		</u-mask> -->
		<u-popup length="100%" v-model="publishPopupShow" border-radius="14" mode="bottom" mask="false">

			<view style="margin-top: 40vh;">
				<view class="" style="padding: 20px;">
					<view class=""
						style="background-color: #fff3e5;padding: 20px;border-radius: 15px;margin-bottom: 15px;">
						<view class="" style="display: flex;justify-content: space-between;">

							<view class="" style="display: flex;">
								<image style="width: 40px;height: 40px;" src="../../static/publish/shaihaowu.png"
									mode=""></image>

								<!-- 图片旁边文字 -->
								<view class="" style="margin-left: 15px;">
									<view class="" style="font-size: 30rpx;font-weight: 1000;">
										晒好物
									</view>
									<view class="" style="font-size: 25rpx;font-weight: 450;margin-top: 5px;">
										特别的宝贝,只晒不卖
									</view>
								</view>
							</view>
							<!-- 右边前往 -->
							<u-icon name="arrow-right" size="32"></u-icon>


						</view>
					</view>

					<view class=""
						style="background-color: #fff1ee;padding: 20px;border-radius: 15px;margin-bottom: 15px;">
						<view class="" style="display: flex;justify-content: space-between;">

							<view class="" style="display: flex;">
								<image style="width: 40px;height: 40px;" src="../../static/publish/huishou.png" mode="">
								</image>

								<!-- 图片旁边文字 -->
								<view class="" style="margin-left: 15px;">
									<view class="" style="font-size: 30rpx;font-weight: 1000;">
										极速回收
									</view>
									<view class="" style="font-size: 25rpx;font-weight: 450;margin-top: 5px;">
										当面质检拿钱
									</view>
								</view>
							</view>
							<!-- 右边前往 -->
							<u-icon name="arrow-right" size="32"></u-icon>


						</view>
					</view>
					<view class=""
						style="background-color: #fef3dd;padding: 20px;border-radius: 15px;margin-bottom: 15px;">
						<view class="" style="display: flex;justify-content: space-between;">

							<view class="" style="display: flex;">
								<image style="width: 40px;height: 40px;" src="../../static/publish/shaihaowu.png"
									mode=""></image>

								<!-- 图片旁边文字 -->
								<view class="" style="margin-left: 15px;">
									<view class="" style="font-size: 30rpx;font-weight: 1000;">
										一键转卖
									</view>
									<view class="" style="font-size: 25rpx;font-weight: 450;margin-top: 5px;">
										2年前买的高考还能卖23元
									</view>
								</view>
							</view>
							<!-- 右边前往 -->
							<u-icon name="arrow-right" size="32"></u-icon>


						</view>
					</view>

					<view @click="gotoPublishXianZhi" class=""
						style="background-color: #fee610;padding: 20px;border-radius: 15px;margin-bottom: 15px;">
						<view class="" style="display: flex;justify-content: space-between;">

							<view class="" style="display: flex;">
								<image style="width: 40px;height: 40px;" src="../../static/publish/faxianzhi.png"
									mode=""></image>

								<!-- 图片旁边文字 -->
								<view class="" style="margin-left: 15px;">
									<view class="" style="font-size: 30rpx;font-weight: 1000;">
										发闲置
									</view>
									<view class="" style="font-size: 25rpx;font-weight: 450;margin-top: 5px;">
										30s发布宝贝
									</view>
								</view>
							</view>
							<!-- 右边前往 -->
							<u-icon name="arrow-right" size="32"></u-icon>


						</view>
					</view>


				</view>
				<!-- ❌号 -->
				<view @click="clickPublishCha" class="" style="display: flex;justify-content: center;z-index: 99;">
					<image v-if="imageShow" :animation="animationData" style="width: 60px;height: 60px;"
						src="../../static/publish/tabcha.png" mode="">
					</image>
				</view>

			</view>

		</u-popup>

	</view>
</template>

<script>
	// // import request from '@/common/request.js';
	import home from "../home/home.vue"; //首页
	import square from "../square/square.vue"; //首页
	import news from "../news/news.vue"; //资讯
	import me from "../me/me.vue"; //资讯
	// // import search from "./search.vue";	//技术视频
	// // import cases from "./main.vue";	//宅家学

	// // import me from "./me.vue";	//个人中心
	export default {
		data() {
			return {
				PageCur: 'home',
				//弹出层
				publishPopupShow: false,
				//加号动画数据
				animationData: null,
			}
		},
		watch: {

		},
		components: {
			home,
			square,
			news,
			me
		},
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur;
			},
			gotoPublish() {
				//显示弹出层
				this.publishPopupShow = true
			},
			//点击发布中的×号
			clickPublishCha() {

				// 创建新的动画实例
				let animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
					transformOrigin: '50% 50% 0'
				});

				// 如果卡片未翻转，执行翻转的动画
				animation.rotate(45).step();
				this.isFlipped = true;

				// 如果卡片未翻转，执行翻转的动画

				// 将动画数据输出并更新状态
				this.animationData = animation.export();

				//延时几秒后，消失×号
				setTimeout(() => {
					this.publishPopupShow = false
				}, 1000)



			},

			gotoPublishXianZhi() {
				uni.navigateTo({
					url:'../publish/publish'
				})
			}
		},

		onReachBottom() {

			//此方法通过爷孙组件通信触发
			if (this.PageCur === 'home') {
				this.$refs.home.getshopList()
			} else if (this.PageCur === 'square') {
				this.$refs.square.pageRecordsList(true)
				// this.$children[0].pageRecordsList(true)
			}
		},


	}
</script>

<style lang="scss" scoped>
	.color_main {
		color: #000000;
		font-weight: 900;
	}

	.box {
		margin: 20upx 0;
	}

	.box view.cu-bar {
		margin-top: 20upx;
	}

	.logo_btn {
		position: absolute;
		z-index: 2;
		border-radius: 50%;
		top: -40rpx;
		left: 0rpx;
		right: 0;
		margin: auto;
		padding: 0;
	}

	.cu-bar.tabbar .action.add-action {
		padding-top: 56rpx !important;
	}
</style>